<style lang="less" rel="stylesheet/less" type="text/less">
.api-views-financial {
  padding-top: 20px;
  width: 100%;
  padding-left: 20px;
  min-width: 1186px;
  height: 100%;
}
.row-page {
  margin-top: 20px;
  padding-bottom: 20px;
}
</style>
<template>
  <div class="api-views-financial">
    <admin-search-form @search="confirmSearch" />
    <index
      :data="data"
      :table_loading="table_loading"
      @openRecharge="openRecharge"
      @lockEdit="lockUser"
      @activeEdit="activeUser"
    />
    <!-- 分页组件 -->
    <Row type="flex" class="row-page" justify="center">
      <Page
        :total="listTotal"
        :current="page_info.page"
        :page-size="page_info.per_page"
        :page-size-opts="[10,30,50]"
        placement="top"
        show-sizer
        show-total
        @on-change="pageChange"
        @on-page-size-change="perPageChange"
      />
    </Row>
    <Modal
      v-model="is_show_modal"
      title="充值"
      class-name="vertical-middle-modal"
      @on-cancel="hide_Modal"
    >
      <recharge-edit v-if="is_show_modal" :data="RechargeData" @rechargeCreate="updateRecharge" />
      <div slot="footer" />
    </Modal>
  </div>
</template>
<script>
import qs from "qs";
import adminSearchForm from "./admin-search-form";
import index from "./index.vue";
import { deleteEmptyValue } from "../../../utils";
import rechargeEdit from "./edit.vue";

export default {
  components: {
    adminSearchForm,
    index,
    rechargeEdit
  },
  data() {
    return {
      data: [],
      table_loading: false,
      listTotal: null,
      is_show_modal: false,
      RechargeData: {},
      token: "",
      page_info: {
        // 分页信息
        page: 1,
        per_page: 10
      },
      search_info: {
        page: 1,
        per_page: 10
      }
    };
  },
  created() {
    this.token = sessionStorage.getItem("token");
    this.financialList(this.page_info);
  },
  methods: {
    /**
     * 页码改变
     * @param  {string} page {当前页码}
     * @return {undefined}
     */
    pageChange(page) {
      this.search_info.page = page;
      this.search_info.per_page = this.page_info.per_page;
      this.financialList(this.search_info);
    },

    /**
     * 每页显示数改变
     * @param  {string} size {当前每页显示数}
     * @return {undefined}
     */
    perPageChange(size) {
      this.search_info.per_page = size;
      this.page_info.per_page = size;
      this.financialList(this.page_info);
    },
    // 确认搜索方法
    confirmSearch({ name, phone, status }) {
      this.page_info.phone = phone || "";

      this.page_info.name = name || "";

      this.page_info.locked = status || "";

      this.page_info = deleteEmptyValue(this.page_info);

      this.search_info = JSON.parse(JSON.stringify(this.page_info));

      this.financialList(this.page_info);
    },

    /**
     * 财务中心列表数据
     *
     */
    financialList(param) {
      param.token = this.token;
      const query_str = qs.stringify(param);
      this.table_loading = true;
      this.axios
        .post(
          `${window.location.origin}/admin/api/v1/admin/customers`,
          query_str
        )
        .then(({ data }) => {
          if (data.code === 200) {
            this.data = data.customers.data;
            this.listTotal = data.customers.total;
          } else if (data.code === 7003) {
            this.$Message.error({
              content: "token验证失败,过期或token错误,请重新登录",
              duration: 5,
              closable: true
            });
            this.$router.push({
              path: "/admin-login"
            });
          } else {
            throw new Error(data.error);
          }
        })
        .catch(err => {
          this.$Message.error({
            content: err.message || err.statusText,
            duration: 5,
            closable: true
          });
        })
        .then(() => {
          this.table_loading = false;
        });
    },

    /**
     *
     * 锁定用户方法
     */
    lockUser(id) {
      const query = {
        customer_id: id,
        locked: 1, // 1为锁定，0为解锁
        token: this.token,
        _method: "PUT"
      };
      const query_str = qs.stringify(query);
      this.table_loading = true;
      this.axios
        .post(
          `${window.location.origin}/admin/api/v1/admin/update_customer_status`,
          query_str
        )
        .then(({ data }) => {
          if (data.code === 200) {
            this.financialList(this.page_info);
            this.$Message.success("锁定成功!");
          } else if (data.code === 7003) {
            this.$Message.error({
              content: "token验证失败,过期或token错误,请重新登录",
              duration: 5,
              closable: true
            });
            this.$router.push({
              path: "/admin-login"
            });
          } else {
            throw new Error(data.error);
          }
        })
        .catch(err => {
          this.table_loading = false;
          this.$Message.error({
            content: err.message || err.statusText,
            duration: 5,
            closable: true
          });
        });
    },

    /**
     *
     * 激活用户方法
     */
    activeUser(id) {
      const query = {
        customer_id: id,
        locked: 0, // 1为锁定，0为解锁
        token: this.token,
        _method: "PUT"
      };
      const query_str = qs.stringify(query);
      this.table_loading = true;
      this.axios
        .post(
          `${window.location.origin}/admin/api/v1/admin/update_customer_status`,
          query_str
        )
        .then(({ data }) => {
          if (data.code === 200) {
            this.financialList(this.page_info);
            this.$Message.success("解锁成功!");
          } else if (data.code === 7003) {
            this.$Message.error({
              content: "token验证失败,过期或token错误,请重新登录",
              duration: 5,
              closable: true
            });
            this.$router.push({
              path: "/admin-login"
            });
          } else {
            throw new Error(data.error);
          }
        })
        .catch(err => {
          this.table_loading = false;
          this.$Message.error({
            content: err.message || err.statusText,
            duration: 5,
            closable: true
          });
        });
    },

    /**
     * 打开充值窗口
     */
    openRecharge(detail) {
      this.is_show_modal = true;
      this.RechargeData = detail;
    },

    /**
     *
     * 关闭编辑框
     */
    hide_Modal() {
      this.RechargeData = null;
    },

    /**
     * 充值方法
     */
    updateRecharge(param) {
      param.token = this.token;
      const query_str = qs.stringify(param);

      this.is_show_modal = false;

      this.table_loading = true;

      this.axios
        .post(
          `${window.location.origin}/admin/api/v1/admin/manual_recharge`,
          query_str
        )
        .then(({ data }) => {
          if (data.code === 200) {
            this.$Message.success("充值成功!");

            this.financialList(this.search_info);
          } else if (data.code === 7003) {
            this.$Message.error({
              content: "token验证失败,过期或token错误,请重新登录",
              duration: 5,
              closable: true
            });
            this.$router.push({
              path: "/admin-login"
            });
          }
        })
        .catch(err => {
          this.table_loading = false;
          this.$Message.error({
            content: err.message || err.statusText,
            duration: 5,
            closable: true
          });
        });
    }
  }
};
</script>
